<template>
  <div>
    <el-dialog :title="title" :visible.sync="dialogVisible" :width="width" :before-close="beforeClose">
      <div class="dialog-content">
        <div class="dialog-search">
          <div class="search-left">
            <div class="input-text">项目名称</div>
            <el-input
              placeholder="输入关键字进行过滤"
              v-model="vname"
              size="small"
              @keyup.enter.native="searchProject"
              clearable
            >
            </el-input>
            <div class="input-text" style="margin-left: 30px">项目Id</div>
            <el-input
              placeholder="输入关键字进行过滤"
              v-model="vid"
              size="small"
              @keyup.enter.native="searchProject"
              clearable
            >
            </el-input>
          </div>
          <div class="search-right">
            <div class="search-btn" @click="searchProject">
              <i class="el-icon-search" style="color: #fff; font-size: 16px"></i>
            </div>
            <div class="refresh-btn" @click="refresh">
              <i class="el-icon-refresh-right" style="font-weight: 700; font-size: 16px"></i>
            </div>
          </div>
        </div>
        <div class="tree-table">
          <div class="table">
            <DataTable
              ref="table"
              :tableData="tableData"
              :showSelection="true"
              :maxHeight="400"
              @changeSelection="handleSelectionChange"
              @rowClick="handleRowClick"
              :showPage="showPage"
              :total="total"
              :pageSize="pageSize"
              :currentPage="currentPage"
              :tableColumn="tableColumn"
              @changePage="changePage"
              @sizeChange="sizeChange"
            />
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="beforeClose">取 消</el-button>
        <el-button type="primary" @click="submitProject">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import DataTable from '/@/components/DataTable/index.vue';
export default {
  name: 'Project',
  components: { DataTable },
  props: {
    // 是否显示
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    // 标题
    title: {
      type: String,
      default: '选择项目',
    },
    //表格数据
    tableData: {
      type: Array,
      default: () => [],
    },
    //表格行
    tableColumn: {
      type: Object,
      default: () => ({}),
    },
    // 分页总数
    total: {
      type: Number,
      default: 0,
    },
    // 显示分页
    showPage: {
      type: Boolean,
      default: false,
    },
    // 每页条数
    pageSize: {
      type: Number,
      default: 10,
    },
    // 当前页数
    currentPage: {
      type: Number,
      default: 1,
    },
    // 是否显示多选
    showSelection: {
      type: Boolean,
      default: false,
    },
    // CheckBox 是否可以勾选
    selectable: {
      type: Function,
      default: () => true,
    },
    // dialog宽度
    width: {
      type: String,
      default: '80%',
    },
  },
  data() {
    return {
      vcode: '',
      vname: '',
      vid: '',
    };
  },
  computed: {},
  methods: {
    //改变页数
    changePage(page) {
      this.page = page;
      this.$emit('changePage', page);
    },
    //每页条数
    sizeChange(page) {
      this.$emit('sizeChange', page);
    },
    // 触发多选框后
    handleSelectionChange(val) {
      this.$emit('changeSelection', val);
    },
    //行单击
    handleRowClick(row, column, event) {
      this.$emit('rowClick', row, column, event);
    },
    //搜索
    searchProject() {
      this.$emit('searchPro', this.vname, this.vid);
    },
    // 关闭dialog前
    beforeClose() {
      this.$emit('hideDialog', false);
    },
    // 确定按钮
    submitProject() {
      this.$emit('submit', false);
    },
    // 清空
    refresh() {
      this.$emit('refresh', (this.vname = ''), (this.vid = ''));
    },
  },
  watch: {},
};
</script>

<style lang="scss">
.dialog-search {
  width: 100%;
  display: flex;
  margin-bottom: 20px;
  position: relative;
  .search-left {
    width: 60%;
    display: flex;
    .input-text {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 25%;
    }
  }
  .search-right {
    // position: absolute;
    // right: 0;
    // top: 5px;
    display: flex;
    align-items: center;
    .search-btn {
      width: 50px;
      height: 32px;
      background-color: #5a616f;
      border-radius: 3px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 10px;
      cursor: pointer;
    }
    .refresh-btn {
      width: 50px;
      height: 32px;
      background-color: #e9e9e9;
      border-radius: 3px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
  }
  .btn {
    position: absolute;
    top: 40px;
    right: 0;
  }
  .form-time {
    width: 130px !important;
    height: 28px !important;
    line-height: 28px !important;
  }
}
.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
</style>
